<template>
    <div class="activity_div">
        <div class="ad_head">
            <div class="adh_left" v-if="studioInfo">
                <img :src="studioInfo.logo">
                <span>{{studioInfo.name}}</span>
            </div>
            <div class="adh_left_main">
                <div class="adh_right" @click="toShowChange">
                    <span>切换工作室</span>
                </div>
                <div class="aldb_out" @click="loginOut">
                    <span>退出登录</span>
                </div>
            </div>
          
        </div>
        <div class="activity_list">
            <template v-for="item in activity_list">
                <div class="al_div" v-if="item.create_user_id==userInfo.user_id || userInfo.studio_role=='host'">
                    <div class="ald_title">
                        <span>{{item.title}}</span>
                    </div>
                    <div class="ald_time">
                        <span>起止时间:</span>
                        <span>{{getTime(item.begin_time)}}~{{getTime(item.end_time)}}</span>
                    </div>
                    <div class="ald_bottom">
                      
                        <div class="aldb_live" @click="beginLive(item)">
                            <span>开始直播</span>
                        </div>

                      
                    </div>
                </div>
            </template>
           
        </div>
   


        <el-dialog title="切换工作室" :visible.sync="changeStudioDialog" :close-on-click-modal="false" width="30%" center>
            <div class="chanMain">
                <div class="changeItem" v-for="(item, index) in studioList" :key="index">
                    <div class="itemMain" @click="chooseStudio(item.id, item.user_id)"
                        :class="{ chooseClick: chooseStudioId == item.id && chooseStudioUserId == item.user_id }">
                        <div class="itemImg">
                            <img :src="item.img" alt="">
                        </div>
                        <div class="itemMess">
                            <div class="itemName">
                                <span>{{ item.name }}</span>
                            </div>
                            <div class="itemUser">
                                <span>{{ item.user_name }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="changeStudioDialog = false">取 消</el-button>
                <el-button type="primary" @click="surechangeStudio">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
    
<script lang="ts" src="./Activity.vue.ts"></script>
<style lang="less" scoped>

.activity_div{
    width:100%;
    min-height:100vh;
    height: 100vh;
    background:#F8F8F8;
}
.activity_list{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 20px;
    box-sizing: border-box;
}
.al_div{
    width: 300px;
    width: 600px;
    height: 284px;
    background: #FFFFFF;
    border-radius: 8px;
    margin-left: 20px;
    margin-top: 20px;
    padding: 0 20px;
    box-sizing: border-box;
}
.ald_title{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 20px;
    margin-top: 20px;
    color: #333333;
    font-weight: bold;
    line-height: 26px;
}
.ald_bottom{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 106px;
}

.aldb_live{
    width: 152px;
    height: 48px;
    background: #1670FF;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ad_head{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-sizing: border-box;
    height: 72px;
    background: #FFFFFF;
}
.adh_left{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.adh_left img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.adh_left span{
    font-size: 20px;
    margin-left: 10px;
    color: #333;
    line-height: 26px;
}
.adh_right{
    width: 156px;
    height: 40px;
    background: #1670FF;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
}


.changeStudio {
    margin-left: 30px;
}

.changeStudio i {
    margin-right: 8px;
}

.itemImg {
    height: 60px;
    width: 60px;
}

.itemImg img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

.itemMain {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    background: #f5f5f5;
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;
    cursor: pointer;
}

.itemMess {
    margin-left: 30px;
}

.changeItem {}

.chanMain {
    height: 500px;
    overflow: auto;
}

.chooseClick {
    border: 1px solid #37DC94;
}
.ald_time{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 18px;
    color: #999999;
    line-height: 24px;
    margin-top: 20px;
}
.ald_time span:last-child{
    margin-left: 10px;
}
.aldb_out{
    width: 138px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 20px;
    border: 1px solid #FF6327;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #FF6327;
    cursor: pointer;
}
.adh_left_main{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
</style>